<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-10 23:41:45
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }

    #grid-card {
        height: calc(100vh - 425px);
        overflow-y: scroll;
    }

    #grid-center {
        height: calc(100vh - 545px);
        overflow-y: scroll;
    }

    .spot-detail .item {
        position: relative;
        margin-bottom: 5px
    }

    .spot-detail .item .label {
        position: absolute;
        color: #8c8c8c;
        left: 0;
        top: 0
    }

    .spot-detail .item .content {
        display: inline-block;
        width: 86%;
        padding-left: 75px;
        word-break: break-all;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, .85)
    }

    .spot-detail .item .label {
        position: absolute;
        color: #8c8c8c;
        left: 0;
        top: 0
    }

    .spot-detail .item .label .step {
        padding: 0 8px;
        line-height: 24px;
        height: 24px;
        border-radius: 12px;
        background-color: #f2d7c8;
        color: #ec7836
    }

    .spot-detail .item .img-list {
        width: 100%;
        overflow: hidden
    }

    .spot-detail .item .img-list .step-img:first-child {
        margin-left: 0
    }

    .spot-detail .item .img-list .step-img {
        display: inline-block;
        width: 47%;
        margin: 4px;
        border-radius: 5px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        height: 200px
    }

    .spot-detail .item .img-list .step-img img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

    .spot-detail .item .status {
        display: inline-block;
        margin-left: 10px;
        height: 20px;
        line-height: 20px;
        border-radius: 12px;
        padding: 0 10px;
        background-color: #01ad74;
        color: #fff;
        position: absolute;
        right: 0;
        font-size: 12px
    }
</style>
<div class="layuimini-page-anim">
    <div class="layui-bg-white">
        <div class="p-5">
            <div class="solid ">
                <div class="layui-row">
                    <div class="layui-col-md4 p-4 solid-right">
                        <div class="title-row">
                            <div class="title-left">
                                <div class="title-info">
                                    <div class="title-line"></div>
                                    <span class="title-text">抽查统计</span>
                                </div>
                            </div>
                            <div class="title-right">
                                <span class="layui-icon layui-icon-right layui-font-gray layui-font-14"></span>
                            </div>
                        </div>
                        <div class="y-scroll" id="grid-card">
                            <div class="section table-stripe">
                                <table class="layui-hide" id="spotCheckPlanTable" lay-filter="currentTableFilter">
                                </table>
                            </div>



                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <!-- 抽查统计 -->
                        <div class="p-4">
                            <div class="solid">
                                <div class="layui-row">
                                    <div class="t-c py-3 font-weight layui-col-xs2 solid-bottom solid-right">
                                        抽查人
                                    </div>
                                    <div class="t-c py-3 font-weight layui-col-xs2 solid-bottom solid-right">
                                        抽查数
                                    </div>
                                    <div class="t-c py-3 font-weight layui-col-xs2 solid-bottom solid-right">
                                        合格数
                                    </div>
                                    <div class="t-c py-3 font-weight layui-col-xs3 solid-bottom solid-right">
                                        不合格数
                                    </div>
                                    <div class="t-c py-3 font-weight layui-col-xs3 solid-bottom">
                                        合格率
                                    </div>
                                </div>
                                <div class="layui-row ">
                                    <div class="t-c py-3 layui-col-xs2 solid-right">
                                        抽查人
                                    </div>
                                    <div class="t-c py-3 layui-col-xs2 solid-right">
                                        抽查数
                                    </div>
                                    <div class="t-c py-3 layui-col-xs2 solid-right">
                                        合格数
                                    </div>
                                    <div class="t-c py-3 layui-col-xs3 solid-right">
                                        不合格数
                                    </div>
                                    <div class="t-c py-3 layui-col-xs3">
                                        合格率
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row">
                            <div class="layui-col-md8 p-4 solid-right">
                                <div class="y-scroll" id="grid-center">
                                    <div class="layui-row mb-5">
                                        <div class="layui-col-xs6 mt-3">
                                            <label class="layui-font-gray">抽查人</label>
                                            <span class="layui-font-black">霍文举</span>
                                        </div>
                                        <div class="layui-col-xs6 mt-3">
                                            <label class="layui-font-gray">抽查时间</label>
                                            <span class="layui-font-black">2025-07-10 22:35:15</span>
                                        </div>
                                        <div class="layui-col-xs6 mt-3">
                                            <label class="layui-font-gray">处理人</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs6 mt-3">
                                            <label class="layui-font-gray">处理情况</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">任务名称</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">任务描述</label>
                                            <span class="layui-font-black">--</span>
                                        </div>





                                    </div>

                                    <div class="layui-tabs" id="planTabs">
                                        <ul class="layui-tabs-header">
                                            <li lay-id="periodicPlan1">前后照片对比</li>
                                            <li lay-id="periodicPlan2">巡检项(1)</li>
                                        </ul>
                                        <div class="layui-tabs-body p-4">
                                            <div class="layui-tabs-item" lay-id="periodicPlan1">
                                                <div class="layui-row mb-5">
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">完工前</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">工单描述</label>
                                                        <span class="layui-font-black">周期性工单</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">完工后</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">完工描述</label>
                                                        <span class="layui-font-black">已完成该项工作</span>
                                                    </div>
                                                </div>





                                            </div>
                                            <div class="layui-tabs-item" lay-id="periodicPlan2">

                                                巡检项

                                                总步骤：1 总图片：3



                                                <div class="spot-detail pl-20">
                                                    <div class="item">
                                                        <div class="label">巡检项</div>
                                                        <div class="content">
                                                            正白旗路与树村中街阻车桩专项巡查计划11点-12点（上地）
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <div class="label">巡检步骤</div>
                                                        <div class="content">
                                                            1/1
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <div class="label">
                                                            <div class="step">Step:1</div>
                                                        </div>
                                                        <div class="content">
                                                            <div class="desc">
                                                                正白旗路与树村中街阻车桩专项巡查计划11点-12点（上地）
                                                                <div class="status"
                                                                    style="background-color: rgb(238, 106, 24);">
                                                                    完成
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <p>提示语：</p>
                                                                <span>1、巡查过程中如发现机动车违停，及时报单。<br>
                                                                    2、重点关注规则表格内标绿色部分问题，如有相关问题，报助英台工单项<br>
                                                                    3、请在11点到12点，在该路段拍摄至少3张该点位的巡查照片(需能够展现明显点位特征如路牌标建筑等)</span>
                                                            </div>
                                                            <div class="mark">备注：</div>
                                                            <div class="img-list">
                                                                <div class="step-img">
                                                                    <img
                                                                        src="https://obs-usop-pro.icityup.com/default/39f5c42f-d4b7-40bb-9ef1-8005728199b6_%E5%8A%A9%E8%8B%B1%E5%8F%B0%E6%B0%B4%E5%8D%B0%E7%85%A7%E7%89%871747537204356.png" />
                                                                </div>
                                                                <div class="step-img">
                                                                    <img
                                                                        src="https://obs-usop-pro.icityup.com/default/ad6dd44c-7633-4919-9f12-fd523d636dac_%E5%8A%A9%E8%8B%B1%E5%8F%B0%E6%B0%B4%E5%8D%B0%E7%85%A7%E7%89%871747537209272.png" />
                                                                </div>
                                                                <div class="step-img">
                                                                    <img
                                                                        src="https://obs-usop-pro.icityup.com/default/ce9ceecb-c24b-4802-b01c-021127fe06dd_%E5%8A%A9%E8%8B%B1%E5%8F%B0%E6%B0%B4%E5%8D%B0%E7%85%A7%E7%89%871747537235846.png" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <form class="layui-form" action="" lay-filter="search-form">
                                    <div class="layui-form-item">


                                        <div class="layui-inline">
                                            <label class="layui-form-label">查看附近摄像头</label>
                                            <div class="layui-input-inline">
                                                <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                                    name="businessNames" lay-search>
                                                    <option value="1">其他</option>
                                                    <option value="2">市容环境（海淀）</option>
                                                    <option value="2">秩序环境（海淀）</option>
                                                    <option value="2">城市运行安全（海淀）</option>
                                                    <option value="2">设施环境（海淀）</option>
                                                    <option value="2">清扫保洁专业检查（海淀）</option>
                                                </select>

                                            </div>
                                        </div>

                                        <div class="title-row">
                                            <div class="title-left">
                                                <div class="title-info">
                                                    <div class="title-line"></div>
                                                    <span class="title-text">抽查结果</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-inline">
                                            <label class="layui-form-label">抽查结果</label>
                                            <div class="layui-input-inline">
                                                <input type="radio" name="AAA" value="1" title="合格">
                                                <input type="radio" name="AAA" value="2" title="不合格" checked>


                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">备注</label>
                                            <div class="layui-input-inline">
                                                <textarea name="remark" placeholder="备注" class="layui-textarea"></textarea>

                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                             <div class="layui-input-inline t-r">
                                            <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                                                lay-filter="data-search-btn">下一个</button>
                                                </div>
                                        </div>

                                    </div>
                                </form>

                            </div>
                            <div class="layui-col-md4 p-4 ">


                                <div class="layui-tabs " id="planTabBase">
                                    <ul class="layui-tabs-header">
                                        <li lay-id="planTabBase1">基础信息</li>
                                        <li lay-id="planTabBase2">工单进度</li>
                                    </ul>
                                    <div class="layui-tabs-body p-4">

                                        <div class="layui-tabs-item" lay-id="planTabBase1">
                                            <div id="grid-card">
                                                <div class="layui-row mb-5">
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">事件编码：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">事件来源：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">事件描述：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">位置：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">部件：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">类型：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">上报人：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">上报时间：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">指派时间：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">图片/视频：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                </div>
                                                <div class="title-row">
                                                    <div class="title-left">
                                                        <div class="title-info">
                                                            <div class="title-line"></div>
                                                            <span class="title-text">完成情况</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-row mb-5">
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">最晚接单时间：</label>
                                                        <span class="layui-font-black">07-11 08:00:00</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">实际接单时间：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>

                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">计划开始时间：</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">计划完工时间：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">实际开始时间：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">实际完工时间：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">是否超时接单：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">是否超时完工：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">完工描述：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">完工照片：
                                                        </label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                </div>
                                                <div class="title-row">
                                                    <div class="title-left">
                                                        <div class="title-info">
                                                            <div class="title-line"></div>
                                                            <span class="title-text">验收情况</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-row mb-5">
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">验收时间</label>
                                                        <span class="layui-font-black">07-11 08:00:00</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">验收人</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">验收评分</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                    <div class="layui-col-xs12 mt-3">
                                                        <label class="layui-font-gray">验收意见</label>
                                                        <span class="layui-font-black">--</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-tabs-item" lay-id="planTabBase2">
                                            <div id="grid-card">
                                                <div class="layui-timeline">
                                                    <div class="layui-timeline-item">
                                                        <i class="layui-icon layui-timeline-axis"></i>
                                                        <div class="layui-timeline-content layui-text">
                                                            <h3 class="layui-timeline-title">2025-07-10 18:01:08</h3>
                                                            <div>
                                                                <span class="layui-badge layui-bg-blue">已完成</span>
                                                            </div>
                                                            <div>高尚完成任务</div>
                                                        </div>
                                                    </div>
                                                    <div class="layui-timeline-item">
                                                        <i class="layui-icon layui-timeline-axis"></i>
                                                        <div class="layui-timeline-content layui-text">
                                                            <h3 class="layui-timeline-title">2025-07-10 18:01:07</h3>
                                                            <div> <span class="layui-badge layui-bg-green">进行中</span>
                                                            </div>
                                                            <div>高尚开始处理任务</div>
                                                        </div>
                                                    </div>
                                                    <div class="layui-timeline-item">
                                                        <i class="layui-icon layui-timeline-axis"></i>
                                                        <div class="layui-timeline-content layui-text">
                                                            <h3 class="layui-timeline-title">2025-07-10 18:01:07</h3>
                                                            <div> <span class="layui-badge layui-bg-green">进行中</span>
                                                            </div>
                                                            <div>系统自动分配任务至北京万科物业服务有限公司供应商\运营工作组</div>
                                                        </div>
                                                    </div>
                                                    <div class="layui-timeline-item">
                                                        <i class="layui-icon layui-timeline-axis"></i>
                                                        <div class="layui-timeline-content layui-text">
                                                            <h3 class="layui-timeline-title">2025-07-10 18:01:07</h3>
                                                            <div> <span class="layui-badge layui-bg-green">待领</span>
                                                            </div>
                                                            <div>us系统创建任务</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>






                    </div>
                </div>
            </div>



        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            tabs = layui.tabs,
            form = layui.form,
            table = layui.table,
            util = layui.util;
        form.render()
        form.render('select'); //刷新select选择框渲染
        // 初始化选项卡
        tabs.render({
            elem: '#planTabs',
            index: 0// 默认选中
        });
        tabs.render({
            elem: '#planTabBase',
            index: 0// 默认选中
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;




        table.render({
            elem: '#spotCheckPlanTable',
            url: 'api/table.json',
            cols: [[
                { type: 'numbers', align: 'center', width: 80, title: '序号' },
                { field: 'name', align: 'center', minWidth: 100, title: '工单名称' },
                { field: 'name', align: 'center', minWidth: 100, title: '状态' },
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });



    })
</script>